<template>
  <div class="ag_grid">
    <div @click="getValues" class="btn">获取选中行数据</div>
    <!-- 
      enableColResize:实现列的拖拽  true和false
      enableSorting：自动排序
      pagination：是否开启分页功能
      gridReady:初始化gird
      rowSelection：是否可以复选
      columnDefs：绑定的列头
      rowData：绑定的每列数据
      cellClicked：点击行
      enableFilter:是否可筛选,需要在对应的列里加上filter属性   值是需要根据筛选的内容
      rowHeight:每行高度
      toolTipShowDelay:toolTip延迟时间
      'pinned':固定列  根据需要在列头中加入  值有：left，right
    -->
    <ag-grid-vue
      style="width: 100%; height: 600px"
      class="table ag-theme-balham"
      :columnDefs="columnDefs"
      :rowData="rowData"
      :enableColResize="true"
      :gridReady="onGridReady"
      @cellClicked="onCellClicked"
      rowSelection="multiple"
      :enableSorting="true"
      :pagination="false"
      :enableFilter="true"
      :gridOptions="gridOptions"
    ></ag-grid-vue>
  </div>
</template>

<script>
import { AgGridVue } from 'ag-grid-vue'
export default {
  components: {
    AgGridVue,
  },
  props: {
    columnDefs: {
      type: Array,
      require: true,
    },
    rowData: {
      type: Array,
      require: true,
    },
  },
  data() {
    return {
      gridOptions: {},
      gridApi: null,
      columnApi: null,
    }
  },
  beforeMount() {
    this.gridOptions = {
      context: { componentParent: this }, //建立了上下文引用，可以在自己声明的组件中调用父组件的方法是属性了
      rowHeight: 40,
      headerHeight: 40,
      paginationAutoPageSize: true, //根据网页高度自动分页（前端分页）
      defaultColDef: {
        lockPosition: false, //禁止拖动列的位置
      },
      defaultColDef: {
        resizable: true, //是否开启调整列大小，就是拖动改变列大小
      },
      defaultColDef: {
        filter: true, //所有列开启刷选器
      },
      //行编辑完成事件
      onRowEditingStopped: function (event) {
        var itxst = JSON.stringify(event.data)
        //alert(itxst);
      },
      //单元格编辑完成事件**************************
      onCellEditingStopped: function (event) {
        var itxst = JSON.stringify(event.data)
        alert(itxst)
      },
      defaultColDef: {
        editable: true, //单元表格是否可编辑
      },
      // rowMultiSelectWithClick: true, //单击就选中，如果为false需要按ctrl再点击才能选中多行
      rowSelection: 'multiple', //设置多好可选
      rowMultiSelectWithClick: true, //点击及选择复选框
      suppressCellSelection: true, //点击不选中单元格
    }
  },
  methods: {
    //ag-grid创建完成后执行的事件
    onGridReady(params) {
      console.log(params)
      // 获取gridApi
      this.gridApi = params.api
      this.columnApi = params.columnApi
      // 这时就可以通过gridApi调用ag-grid的传统方法了，实现表格自适应，避免横向滚动条
      this.gridApi.sizeColumnsToFit()
    },
    // 获取选中行数据
    getValues() {
      //获取选中的数据
      var selRows = this.gridApi.getSelectedRows()
      if (selRows == null || selRows.length <= 0) {
        alert('您未选中任何数据')
        return
      }
      alert(selRows[0].title)
    },

    //单元格点击事件
    onCellClicked(cell) {
      alert('你点击了' + cell.rowIndex + '行，值：' + cell.value)
      //单元格数据
      console.log(cell)
      // 获取选中单元格所在行的数据
      console.log(cell.data)
    },
  },
}
</script>

<style lang="scss" scoped>
.ag_grid {
  width: 100%;
}
</style>